<template>
 <div>
   <el-container>
<!--     头部-->
     <el-header style="height:80px;background-color: #cccccc">
       <div style="width: 65%;margin: auto">
         <el-row :gutter="20">
         <el-col :span="6"><div class="grid-content bg-purple"><img src="../assets/img/logo.jpg" alt=""></div></el-col>
         <el-col :span="6" :offset="10"><div class="grid-content bg-purple"><img src="../assets/img/phone.jpg" alt=""></div></el-col>
       </el-row>
       </div>
     </el-header>
<!--     main主体部分-->
     <el-main >
       <div class="mainMenu">

         <div style="margin: auto;width: 940px">
          <ul class="mainMenu_Ul">
            <li @click="$router.push('/homePage')">首页</li>
            <li style="width: 8px;"><img src="../assets/t1.jpg" alt=""></li>
            <li @click="$router.push('/churchyardPage')">境外游</li>
            <li style="width: 8px;"><img src="../assets/t1.jpg" alt=""></li>
            <li @click="$router.push('/churchyardPage')">境内游</li>
            <li style="width: 8px;"><img src="../assets/t1.jpg" alt=""></li>
            <li @click="$router.push('/churchyardPage')">海岛游</li>
            <li style="width: 8px;"><img src="../assets/t1.jpg" alt="#"></li>
            <li @click="$router.push('/multiPage')">团购</li>
            <li style="width: 8px;"><img src="../assets/t1.jpg" alt="#"></li>
            <li @click="getCar">购物车</li>
          </ul>
         </div>

       </div>
  <div>
    <router-view></router-view>
  </div>
     </el-main>
<!--    尾部 -->
     <el-footer>
         <div style="width: 75%;border-top: 1px solid #cccccc;margin: 20px auto">
       </div>
       <p style="color: #676767">许可证编号：WE125482154 鄂ICP备125478966</p>
       <p class="footer_a_text"><a href="#">隐私保护</a> | <a href="#">诚聘英才</a> | <a href="#">关于我们</a> | <a href="#">网站地图</a> | <a href="#">友情链接</a> | <a href="#">商务合作</a></p>
     </el-footer>
   </el-container>
 </div>

</template>





<script>
export default {
  name: "index",
  data(){
    return{
    }
  },
  methods:{
    getCar:function (){
      if (localStorage.getItem("TOKEN") != null){
        this.$router.push('/shopPage');
      }else{
        this.$confirm('请先登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/login')
        }).catch(() => {
        });
      }
    }
  }
}
</script>

<style>
*{
  margin: 0px;
  padding: 0px;
}
.el-header{
  background-image: url("../assets/img/top-bg.jpg");
}
</style>
<style scoped>
#test{
  background: #42b983;
}
.mainMenu{
  width: 100%;
  height: 42px;
  background-image: url("../assets/menu.jpg");

}
.el-main{
  overflow: visible;
  padding: 0px;
}
.mainMenu_Ul{
  list-style: none;
  margin: 0px;
  /*margin-bottom: 200px;*/
}
.mainMenu_Ul li{
  width: 150px;
  height: 42px;
  text-align: center;
  line-height: 42px;
  /*display: inline-block;*/
  cursor:hand;
float: left;
  color: #313030;
  font-weight: 700;
}

.footer_a_text a{
  text-decoration: none;
  font-size: 14px;
  color: #676767;
}

</style>